import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 全局状态
  state: {
    name: '张三',
    app: {
      appname: 'appname'
    }
  },
  // 更改state的唯一方式  commit 触发mutation
  // 纯函数：没有异步
  mutations: {
    // state: 全局状态
    // data： 触发mutatuon传递的参数
    CHANGE_NAME(state, data) {
      state.name = data
    }
  },
  // vuex 异步 
  //  通过 dispatch 触发action中的方法
  actions: {
    // ctx:vuex实例
    // 触发action 传来的参数
    changeAsyncName(ctx, data) {
      setTimeout(() => {
          ctx.commit('CHANGE_NAME', data)
      }, 3000)
    }
  },
  // vuex允许将store 分割成模块，每一个模块都有自己的state，mutation，action getter
  modules: {
    // 命名空间
    app: {
      state: {
        appname: 'appname'
      },
      mutations: {},
      getters: {},
      actions: {
        changeName() {
          console.log('触发')
        }
      }
    },
    
    about: {
      state: {
        aboutname: 'aboutname'
      },
      mutations: {},
      getters: {},
      actions: {}
    }
  },
  // state的计算属性
  getters: {
    // 存放的是属性 不是方法
    // 方法接受参数 state 为全局状态，会根据依赖项发生变化
    computedName: (state) => {
      return state.name + 'getter'
    }
  }
})
